<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style>
.my-header {
    background: url('../image/mybg.png') no-repeat;
    background-size: cover;
    min-height: 220px;
    position: relative;
}
.my-info {
    position: relative;
    padding: 20px 0;
    width: 100%;
    bottom: 0;
    text-align: center;
    vertical-align: center;
}
.my-info img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.my-info p.nickname {
    margin-top: 5px;
    color: #ffffff;
    font-size: 18px;
}
.my-menu {
    position: absolute;
    width: 100%;
    height: 45px;
    line-height: 45px;
    left: 0;
    bottom: 0;
    text-align: center;
    background: #ffffff;
    filter:Alpha(opacity=50);
    background:rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important;
    color: #ffffff;
    font-size: 14px;
}
.my-menu .aui-col-xs-3 {
    border-right: 1px solid #9bd6d5;
}
.my-menu .aui-col-xs-3:last-child {
    border-right: none;
}
.my-menu > div:active {
    background: #ffffff;
    filter:Alpha(opacity=50);
    background:rgba(255, 255, 255, 0.2) none repeat scroll 0 0 !important;
}
.aui-list-view-cell {
    line-height: 26px;
}
</style>
<body>
    <div class="aui-content my-header">
        <div class="my-info">
            <img src="../image/demo5.png">
            <p class="nickname">流浪男</p>
        </div>
        <div class="my-menu">
            <div class="aui-col-xs-3">首页</div>
            <div class="aui-col-xs-3">动态</div>
            <div class="aui-col-xs-3">关注</div>
            <div class="aui-col-xs-3">设置</div>
        </div>
    </div>
    <div class="aui-content aui-card">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">个人资料
                </a>
            </li>
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">账号设置</a>
            </li>
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">我的订单</a>
            </li>
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">我的相册</a>
            </li>
        </ul>
    </div>
    <div class="aui-content aui-card">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">系统设置</a>
            </li>
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">检查更新</a>
            </li>
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">
                清除缓存
                <span class="aui-badge aui-badge-danger">36M</span>
                </a>
            </li>
            <li class="aui-list-view-cell">
                <a class="aui-arrow-right">使用帮助</a>
            </li>
        </ul>
    </div>
    <div class="aui-content aui-card">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell aui-switch-body">
                <div class="aui-switch-title">声音提醒</div>
                <input type="checkbox" class="aui-switch aui-pull-right" checked>
            </li>
            <li class="aui-list-view-cell aui-switch-body">
                <div class="aui-switch-title">自动更新</div>
                <input type="checkbox" class="aui-switch aui-pull-right">
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function () {
    }
</script>
</html>